import { HomeOutlined } from '@ant-design/icons'
import { useNavigate } from '@tanstack/react-router'
import { Button } from 'antd'

export function Err404() {
  const navigate = useNavigate()

  const handleGoHome = () => {
    // 返回上一级
    navigate(-1)
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        textAlign: 'center',
        padding: '20px',
        backgroundColor: '#f5f5f5',
      }}>
      <div
        style={{
          fontSize: '100px',
          fontWeight: 'bold',
          color: '#1890ff',
          marginBottom: '20px',
        }}>
        404
      </div>
      <h1
        style={{
          fontSize: '24px',
          fontWeight: '500',
          marginBottom: '10px',
          color: '#333',
        }}>
        页面未找到
      </h1>
      <p
        style={{
          fontSize: '16px',
          color: '#666',
          marginBottom: '30px',
          maxWidth: '500px',
        }}>
        抱歉，您访问的页面不存在。可能是因为页面已被删除或您输入的地址有误。
      </p>
      <Button type="primary" size="large" icon={<HomeOutlined />} onClick={handleGoHome}>
        返 回
      </Button>
    </div>
  )
}
